<template>
  <div id="app">
    患者姓名:
    <el-input v-model="form.username" style="width:160px;"></el-input>患者卡号:
    <el-input v-model="form.kahao" style="width:160px;"></el-input>患者年龄:
    <el-input v-model="form.age" style="width:120px;"></el-input>患者性别:
    <el-select v-model="form.sex" placeholder="请选择" style="width:100px">
      <el-option v-for="bean in stateList" :label="bean.name" :key="bean.id" :value="bean.id"></el-option>
    </el-select>出生日期:
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="form.udate"
      style="width:180px;"
    ></el-date-picker>
    <br />
    <br />手机号码:
    <el-input v-model="form.phone" style="width:120px;"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    证件号码:
    <el-input v-model="form.zhengjian" style="width:120px;"></el-input>
    地址：<el-input v-model="form.dizhi" style="width:120px;"></el-input>
    诊断：<el-input v-model="form.zhengduan" style="width:120px;"></el-input>
    医嘱：<el-input v-model="form.yizhu" style="width:120px;"></el-input>
    <el-button type="primary" size="medium" @click="addPurchase">去收费</el-button>

    <br />
    <br />
    <br />
    <br />
    <br />
    <el-button type="success" size="medium" @click="add">添加商品</el-button>
    <el-button type="danger" size="medium" @click="del">删除商品</el-button>

    <!-- 药片信息对话框 -->
    <el-dialog title="药 片 信 息" :visible.sync="addFlag">
      药片名称
      <el-input v-model="name" style="width:180px;" placeholder="请输入药片名称"></el-input>
      <el-button type="infor" size="medium" @click="getGoodsList">查 询</el-button>
      
      <el-table :data="goodsList" @row-click="openDetails">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="药片名称" width="80"></el-table-column>
        <el-table-column prop="yongliang" label="用量" width="140"></el-table-column>
        <el-table-column prop="danwei" label="单位" width="50"></el-table-column>
        <el-table-column prop="yongfa" label="用法" width="80"></el-table-column>
        <el-table-column prop="pingdu" label="频度" width="80"></el-table-column>
        <el-table-column prop="danwei" label="单位" width="80"></el-table-column>
        <el-table-column prop="price" label="价钱" width="80"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="药片信息" :visible.sync="Flag">
      <el-form :model="updBean">
        <el-form-item label="ID" :label-width="formLabelWidth">
          <el-input v-model="updBean.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药片名称" :label-width="formLabelWidth">
          <el-input v-model="updBean.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用量" :label-width="formLabelWidth">
          <el-input v-model="updBean.yongliang" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="updBean.danwei" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="频度" :label-width="formLabelWidth">
          <el-input v-model="updBean.pingdu" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价钱" :label-width="formLabelWidth">
          <el-input v-model="updBean.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input-number v-model="updBean.num" :min="1" :max="100" @change="handleChange"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Flag = false">取 消</el-button>
        <el-button type="primary" @click="addPurchaseGoods">确 定</el-button>
      </div>
    </el-dialog>
   
    <!-- 进货商品表格 -->
    <el-table :data="GoodsPurchaseList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="药片名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="yongliang" label="用量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="yongfa" label="用法" show-overflow-tooltip></el-table-column>
      <el-table-column prop="pingdu" label="频度" show-overflow-tooltip></el-table-column>
      <el-table-column prop="danwei" label="单位" show-overflow-tooltip></el-table-column>
      <el-table-column prop="price" label="价钱" show-overflow-tooltip></el-table-column>
      <el-table-column prop="num" label="数量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="total" label="总金额" show-overflow-tooltip v-bind:formatter="getSum"></el-table-column>
    </el-table>
  </div>
</template>

<script>
var quan;
var f = 0;
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      formLabelWidth: "120px",
      supplierList: [],
      stateList: [
        {
          id: "1",
          name: "男"
        },
        {
          id: "2",
          name: "女"
        }
      ],
      form: {
        id: "",
        username: "",
        kahao: "",
        age: "",
        udate: "",
        sex: "",
        phone: "",
        zhengjian: "",
        dizhi: "",
        zhengduan: "",
        yizhu: ""
      },
      addFlag: false,
      goodsList: [],
      name: "",
      pagination: {},
      Flag: false,
      updBean: {
        name : "",
        yongliang:"",
        yongfa:"",
        pingdu:"",
        danwei:"",
        price:"",
        id: "",
        num: 1
      },
      num: 1,
      GoodsPurchaseList: [],
      editBean: {},
      updateFlag: false
    };
  },
  mounted: function() {
    quan = this;
    quan.axios
      .get("http://localhost:9999/biz/tCustomer/getCustomer", {
        params: {
          access_token: localStorage.getItem("access_token")
        }
      })
      .then(function(res) {
        quan.supplierList = res.data.obj;
      });
    quan.orderFormatter();
    quan.getCurrentMonthFirst();
  },
  methods: {
    //生成订单号
    orderFormatter: function() {
      // 时间戳
      var time = new Date();
      // 年
      var year = String(time.getFullYear());
      // 月
      var mouth = String(time.getMonth() + 1);
      // 日
      var day = String(time.getDate());
      // 时
      var hours = String(time.getHours());
      if (hours.length < 2) {
        hours = "0" + hours;
      }
      // 分
      var minutes = String(time.getMinutes());
      if (minutes.length < 2) {
        minutes = "0" + minutes;
      }
      // 秒
      var seconds = String(time.getSeconds());
      if (seconds.length < 2) {
        seconds = "0" + seconds;
      }
      var str = "JH" + year + mouth + day + hours + minutes + seconds;
      quan.form.customerReturnNumber = str;
    },
    add: function() {
      quan.addFlag = true;
      quan.getGoodsList();
    },
    openDetails: function(row) {
      quan.Flag = true;
      quan.updBean = row;
    },
    getGoodsList: function() {
      quan.axios
        .get("http://localhost:9999/upms/tKucun/FindYaoList", {
          params: {
            access_token: localStorage.getItem("access_token"),
            name : quan.name
          }
        })
        .then(function(res) {
          quan.goodsList = res.data.obj;
        });
    },
    handleChange(value) {
      quan.updBean.num = value;
    },
    addPurchase: function() {
      var data = {
        udate:quan.form.udate,
        username: quan.form.username,
        kahao: quan.form.kahao,
        age: quan.form.age,
        sex: quan.form.sex,
        phone: quan.form.phone,
        zhengjian: quan.form.zhengjian,
        dizhi: quan.form.dizhi,
        zhengduan: quan.form.zhengduan,
        yizhu: quan.form.yizhu,
        userNamess: localStorage.getItem("username"),
        list: quan.GoodsPurchaseList
      };
      console.log("data的值是1：{}"+data.userName);
      var $this = this;
      quan.axios({
          method: "post",
          url: "http://localhost:9999/upms/tHuanzhe/save?access_token=" +
            localStorage.getItem("access_token"),
          data: data
        })
        .then(function(res) {
          $this.$message(res.data.msg);
          quan.form = {};
          quan.GoodsPurchaseList = [];
          quan.$router.push({path: "./Fukuan"}); 
        });
    },
    update: function(row) {
      quan.updateFlag = true;
      quan.editBean = row;
      quan.del();
    },
    del: function() {
      quan.GoodsPurchaseList = [];
    },
    addPurchaseGoods: function() {
      quan.GoodsPurchaseList.push(quan.updBean);
      quan.Flag = false;
      quan.addFlag = false;
      quan.updateFlag = false;
    },
    getSum: function(row) {
      var sum1 = 0;
      sum1 = row.num * row.price;
      return sum1;
    },
    //默认选中当前日期
    getCurrentMonthFirst: function() {
      var date = new Date();
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      quan.form.customerReturnDate = date.getFullYear() + "-" + month + "-" + day;
    },
    getMoney: function(row) {
      f = f + row.num * row.sellingPrice;
      quan.form.amountPaid = f;
      quan.form.amountPayable = f;
    }
  }
};
</script>
